<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding,height:'100vh'}">
      <!--顶部-->
      <view class="top-box">

        <img
            src="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/4c322a738be285b48d80b51bebc68e5.png"
            alt="logo"
            style="width: 300rpx;height: 50rpx"

        >

        <view class="search-place" @click="Taro.navigateTo({url:'/pages/view/search/index'})">
          <IconFont name="search" :color="themeVars.placeHolderColor"></IconFont>&nbsp;
          <span style="font-size: 12px;color: grey">请输入</span>
        </view>
        <view class="data-box">
          <view class="data-num-show">
            <view style="color: black">今日访问：</view>
            <IconFont v-if="commonVisitLoading" name="loading" color="#fa2c19"></IconFont>
            <view v-else class="data-num">{{ commonVisit.toDayCount }}</view>
          </view>
          <view class="data-num-show">
            <view style="color: black">总访问：</view>
            <IconFont v-if="commonVisitLoading" name="loading" color="#fa2c19"></IconFont>
            <view v-else class="data-num">{{ commonVisit.allCount }}</view>
          </view>
        </view>
      </view>

      <!--    轮播-->
      <nut-skeleton :loading="carouselListLoading" width="750rpx" height="15px" animated row="3"
                    style="margin: 10rpx 0">
        <nut-swiper
            :init-page="2"
            :auto-play="3000"
            pagination-visible
            pagination-color="#426543"
            pagination-unselected-color="#808080"
            style="margin-top: 10px"
        >
          <nut-swiper-item v-for="(item, index) in carouselList" :key="item.id" style="height: 150px">
            <!--图片轮播-->
            <img v-if="item.urlType === 'IMG'" @click="clickCarousel(item)" :src="item.url" alt=""
                 style="height: 100%; width: 100%" draggable="false"/>


            <!-- 视频号-->
            <channel-video v-if="item.urlType === 'VIDEO_NUM'" object-fit="cover" style="height: 100%; width: 100%"
                           :feed-id="item.url" :finder-user-name='FinderUserName()'/>

          </nut-swiper-item>
        </nut-swiper>
      </nut-skeleton>
      <!-- 商品分类-->
      <nut-skeleton :loading="getProductCategoryLoading" width="750rpx" height="15px" animated row="6"
                    style="margin: 10rpx 0">
        <view class="product-category">
          <nut-grid :border="false" :column-num="5">
            <nut-grid-item v-for="item in busiTypeList" :key="item.id"
                           @click="Taro.navigateTo({url:'/pages/view/twoCatDetail/index?id='+item.id+'&name='+item.name})">
              <view style="display: flex;flex-direction: column;justify-content: space-evenly;align-items: center">
                <nut-avatar size="50" shape="square">
                  <img
                      :src="item.icon"
                  />
                </nut-avatar>
                <view style="font-size: 12px;margin-top: 8px">{{ item.name }}</view>
              </view>
            </nut-grid-item>
          </nut-grid>
        </view>
      </nut-skeleton>

      <!--商品tab-->
      <nut-tabs v-model="value" align="left" :ellipsis="false" :title-gutter="10" auto-height>
        <nut-tab-pane title="商家推荐" pane-key="1" style="padding: 10px  ">


          <nut-skeleton :loading="enterpriseRecommendListLoading" width="250px" height="15px" animated row="3">
            <item-shop v-if="enterpriseRecommendList.length > 0" :data="enterprise"
                       @click="Taro.navigateTo({url:'/pages/view/enterpriseIntro/index?id='+enterprise.id})"
                       v-for="enterprise in enterpriseRecommendList" style="margin-bottom: 5px;"/>
            <nut-empty v-else :image="emptyUrl()" :image-size="100" description="暂无数据"/>

          </nut-skeleton>


        </nut-tab-pane>
        <nut-tab-pane title="特价商品" pane-key="2" style="padding: 10px  ">

          <nut-skeleton :loading="productSpecProductListLoading" width="250px" height="15px" animated row="3">
            <SpecCommodity v-if="productSpecProductList.length > 0" :data="product"
                           @click="Taro.navigateTo({url:'/pages/view/commodityInfo/index?id='+product.id})"
                           v-for="product in productSpecProductList"/>
            <nut-empty v-else :image="emptyUrl()" :image-size="100" description="暂无数据"/>
          </nut-skeleton>


        </nut-tab-pane>
      </nut-tabs>
    </view>

  </nut-config-provider>
</template>

<script>
import {ref} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";
import Taro from "@tarojs/taro";
import {twProductCategoryPage} from "../../../api/productCategory";
import {twEnterpriseRecommend} from "../../../api/enterprise";
import {twProductSpecProduct} from "../../../api/product";
import {commonVisitNum, twCarouselEnableList} from "../../../api/login";
import {emptyUrl} from "../../../utils/imgUtils";
import {FinderUserName} from "../../../api/constant";
import {twPromoterBindPromoter} from "../../../api/promoter";

const {theme, themeVars} = useTheme()

const value = ref('1')


const busiTypeList = ref([]);
const getProductCategoryLoading = ref(false);
const getProductCategoryPage = async () => {
  getProductCategoryLoading.value = true;
  await twProductCategoryPage({current: 1, size: 1000, level: 1, status: 'ENABLE'}).then(res => {
    busiTypeList.value = res.data.records
  }).finally(() => {
    getProductCategoryLoading.value = false;
  })
}


const enterpriseRecommendList = ref([])
const enterpriseRecommendListLoading = ref(false)
const getEnterpriseRecommend = async () => {
  enterpriseRecommendListLoading.value = true;
  await twEnterpriseRecommend().then(res => {
    console.log("twEnterpriseRecommend", res)
    enterpriseRecommendList.value = res.data
  }).finally(() => {
    enterpriseRecommendListLoading.value = false;

  })
}


const productSpecProductList = ref([])
const productSpecProductListLoading = ref(false)
const getProductSpecProduct = async () => {
  productSpecProductListLoading.value = true;
  await twProductSpecProduct().then(res => {
    console.log("twEnterpriseRecommend", res)
    productSpecProductList.value = res.data
  }).finally(() => {
    productSpecProductListLoading.value = false;
  })
}


const carouselList = ref([])
const carouselListLoading = ref(false);
const getCarouselList = async () => {
  carouselListLoading.value = true;
  await twCarouselEnableList().then(res => {
    console.log("twCarouselEnableList", res)
    if (200 == res.code) {
      carouselList.value = res.data
    }
  }).finally(() => {
    carouselListLoading.value = false;
  })
}


const clickCarousel = (item) => {
  console.log("item", item.toType)
  if ("RICHTEXT" == item.toType) {
    console.log("RICHTEXT")

    Taro.navigateTo({url: `/pages/view/carouselRich/index?id=` + item.id})
    return
  }


  if ("ENTERPRISE" == item.toType) {
    console.log("ENTERPRISE")

    Taro.navigateTo({url: `/pages/view/enterpriseIntro/index?id=` + item.data})
    return

  }


  if ("PRODUCT" == item.toType) {
    console.log("PRODUCT")

    Taro.navigateTo({url: `/pages/view/commodityInfo/index?id=` + item.data})
    return

  }


  if ("PUBLISH" == item.toType) {
    console.log("PUBLISH")

    Taro.navigateTo({url: `/pages/view/publishInfo/index?id=` + item.data})
    return

  }

  if ("VIDEO_NUM" == item.toType) {
    console.log("VIDEO_NUM")
    Taro.openChannelsActivity({
      finderUserName: FinderUserName,
      feedId: item.data
    })

    return

  }


}


const commonVisit = ref({})
const commonVisitLoading = ref(false)
const getCommonVisitNum = async () => {
  commonVisitLoading.value = true;
  await commonVisitNum().then(res => {
    if (200 == res.code) {
      commonVisit.value = res.data
    }
  }).finally(() => {
    commonVisitLoading.value = false;
  })
}


export default {
  methods: {
    FinderUserName() {
      return FinderUserName
    },
    emptyUrl() {
      return emptyUrl
    }
  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {


    Promise.all([
      getProductCategoryPage(),
      getEnterpriseRecommend(),
      getProductSpecProduct(),
      getCarouselList(),
      getCommonVisitNum()
    ]).finally(() => {

    })



    console.log("options",options)
    if (options.scene) {
      const uid = options.scene.split("-")[1];
      console.log("uid",uid)
      twPromoterBindPromoter({id:uid}).then(res=>{
        Taro.showToast({title: res.msg, icon: 'none', duration: 3000,});

       }).finally(()=>{
        Taro.hideLoading();
      })
    }
  },

  onReady() {
  },

  onShow() {
    getCommonVisitNum()
  },

  onHide() {
  },

  onPullDownRefresh() {
    console.log("onPullDownRefresh")


    Promise.all([
      getProductCategoryPage(),
      getEnterpriseRecommend(),
      getProductSpecProduct(),
      getCarouselList(),
      getCommonVisitNum()
    ]).finally(() => {
      Taro.stopPullDownRefresh();
    })


  },
  onReachBottom() {
    console.log("onReachBottom")

  },


  setup() {


    return {
      theme,
      themeVars,
      Taro,
      value,
      busiTypeList,
      enterpriseRecommendList,
      productSpecProductList,
      carouselList,
      clickCarousel,
      commonVisit,
      enterpriseRecommendListLoading,
      productSpecProductListLoading,
      carouselListLoading,
      getProductCategoryLoading,
      commonVisitLoading

    }
  }

}

</script>

<style>


.search-place {
  width: 280px;
  height: 50px;
  background: white;
  border-radius: 29px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0 10px;
}

.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
  width: 100%;
}

.data-num-show {
  display: flex;
  font-size: 24px;
  height: 29px;
  color: #D80000;

}

.top-box {
  display: flex;
}

.product-category {
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

</style>